/*
 * @Author: wxt 
 * @Date: 2021-08-31 11:04:58 
 * @Last Modified by: wxt
 * @Last Modified time: 2021-09-10 17:47:38
 */

<template>
    <div class="report">
        <div class="search-area" v-show="showSearch">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="上报时间">
                <el-date-picker
                    v-model="dateRange"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                ></el-date-picker>
                </el-form-item>

                <el-form-item label="是否回复" prop="roleName">
                <el-select
                    v-model="queryParams.reply"
                    size="small"
                    placeholder="请选择"
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option label="是" :value="1"></el-option>
                    <el-option label="否" :value="0"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item style="margin-left: 30px">
                <el-button
                    type="cyan"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="content-area">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" style="text-align: right"></right-toolbar>
            <div class="table-list">
                <el-table v-loading="loading" :data="tableList" border height="100%">
                    <el-table-column label="编号" prop="id"  width="150" align="center"/>
                    <el-table-column label="上报时间" prop="createTime"  width="240" align="center" :formatter="formatDate"/>
                    <el-table-column label="上报位置" prop="place"  width="330" align="center" :show-overflow-tooltip="true"/>
                    <el-table-column label="案件照片" prop="images"  width="330" align="center">
                        <template slot-scope="scope">
                            <span v-for="(item,index) in scope.row.images" :key="index" style="margin-right:5px">
                                <el-image 
                                    style="height: 65px;"
                                    :src="item" 
                                    :preview-src-list="scope.row.images">
                                </el-image>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="案件描述" prop="content"  width="280" align="center"/>
                    <el-table-column label="是否回复" prop="isResponse"  width="100" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isResponse==0">是</div>
                            <div v-if="scope.row.isResponse==1">否</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-tickets" @click="handleRegister(scope.row)"  style="color:#409EFF;">登记</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" style="color:red;">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination v-if="isShowPage"
                    class="no-shadow"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.pageNum"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="queryParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
        </div>
        </div>
    </div>
</template>

<script>
import {getTableList,removeBy} from '@/api/case/citizenReport'
export default {
    data() {
        return {
        geocoder:undefined,
        loading:false,
        showSearch:true,
        // 是否显示分页
        isShowPage: true,
        // 列表数据总数
        count: 0,
        // 查询参数
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            reply: "",
        },
        // 日期范围
        dateRange: [],
        tableList:[]
        };
    },
    created(){
        this.geocoder = new AMap.Geocoder({
            city: "029", //城市设为西安，默认：“全国”
            radius: 1000 //范围，默认：500
        });
        
        this.getList()
        
    },
    mounted() {
        
    },
    methods: {
        // 格式化日期
        formatDate(row,column) {
            var d = new Date(row.createTime);
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            var date = d.getDate();
            var day = d.getDay();
            var hours = d.getHours();
            var minutes = d.getMinutes();
            var seconds = d.getSeconds();
            var ms = d.getMilliseconds();
            var curDateTime = year;
            if (month > 9) curDateTime = curDateTime + "-" + month;
            else curDateTime = curDateTime + "-0" + month;
            if (date > 9) curDateTime = curDateTime + "-" + date + " ";
            else curDateTime = curDateTime + "-0" + date + " ";
            if (hours > 9) curDateTime = curDateTime + "" + hours;
            else curDateTime = curDateTime + "0" + hours;
            if (minutes > 9) curDateTime = curDateTime + ":" + minutes;
            else curDateTime = curDateTime + ":0" + minutes;
            if (seconds > 9) curDateTime = curDateTime + ":" + seconds;
            else curDateTime = curDateTime + ":0" + seconds;
            return curDateTime;
        },
        // 获取表格数据
        getList(){
            this.loading = true
            getTableList(this.queryParams).then(res=>{
                if(res.code===200){
                    this.count = res.total
                    res.rows.map(item=>{
                        item.place = ''
                        let place = JSON.parse(item.geometry).coordinates
                        // item.place = JSON.parse(item.geometry).coordinates
                        this.getGEMcode(place).then((res)=>{
                            item.place = res
                        })
                        if(item.images){
                            item.images = item.images.split(',').map(items=>{
                            return `/file/${items}`
                            // return `http://192.168.100.42:8086/profile/${items}`
                        })
                        }
                        
                    })
                    this.tableList = res.rows
                    this.loading = false
                }
            })
        },
        // 查询
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        // 重置
        resetQuery() {
            this.dateRange = [];

            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                reply: "",
            };
            this.resetForm("queryForm");
            this.getList()
        },
        // 高德地图逆地址编码
        getGEMcode(data){
                 // map.add(marker);
                 // marker.setPosition(lnglat);
                return new Promise((resolve,reject)=>{
                    this.geocoder.getAddress(data, function(status, res) {
                    if (status === 'complete'&&res.regeocode) {
                        let address = res.regeocode.formattedAddress;
                        resolve(address)
                    }else{
                        log.error('根据经纬度查询地址失败')
                    }
                });
                })
               
               
        },
        // 登记
        handleRegister(data){
            this.$router.push({name:'Caseregistration',params:data})
        },
        // 删除
        handleDelete(data){
            this.$confirm(`是否删除编号为${data.id}的数据`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                removeBy(data).then(res=>{
                    if(res.code ===200){
                        this.getList()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                         });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        handleSizeChange(size){
            this.queryParams.pageSize = size;
            this.queryParams.pageNum = 1;
            this.getList();
        },
        handleCurrentChange(currentPage){
            this.queryParams.pageNum = currentPage;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
.report {
  width: 100%;
  height: 100%;
  padding: 0.125rem 0.1875rem;
  display: flex;
  flex-direction: column;
  .search-area {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    padding: 0.125rem;
    border-radius: 0.075rem;
  }
  .content-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #ffffff;
    padding: 0.125rem;
    border-radius: 0.075rem;
    margin-top: 0.1875rem;
    overflow: hidden;
    .table-list {
      display: flex;
      flex: 1;
      margin: 0.125rem 0;
      overflow: hidden;
      .el-table {
        flex: 1;
        overflow-y: auto;
      }
    }
  }
  .el-form-item {
    margin-bottom: 0.125rem;
    .el-form-item__label {
      width: 1.575rem;
      padding: 0;
      font-weight: inherit;
    }
  }
  .el-form--inline .el-form-item {
    margin-right: 0.1875rem;
  }
}
.line {
  text-align: center;
}
</style>
